<template>
  <layout-template>
    <template slot="left-panel">
      <el-input v-model="filterText" placeholder="Filter keyword" style="margin-bottom:30px;"/>
      <el-tree
        ref="tree2"
        :data="data2"
        :props="defaultProps"
        :filter-node-method="filterNode"
        class="filter-tree"
        default-expand-all
      />
    </template>
    <template slot="right-panel">
      <el-transfer
        filterable
        :filter-method="filterMethod"
        filter-placeholder="请输入搜索内容"
        v-model="value"
        :data="data"
      >
      </el-transfer>
    </template>
  </layout-template>
</template>

<script>
import layoutTemplate from '@/layout/components/windowFrame/frame';

export default {
  components: { layoutTemplate },
  data() {
    return {
      filterText: '',
      data2: [],
      defaultProps: {
        children: 'children',
        label: 'label'
      },

      data: [],
      value: [],
      filterMethod(query, item) {

      }

    };
  },
  watch: {
    filterText(val) {
      this.$refs.tree2.filter(val);
    }
  },

  methods: {
    filterNode(value, data) {
      if (!value) return true;
      return data.label.indexOf(value) !== -1;
    }
  }
};
</script>
<style lang="scss">
</style>
